﻿@using Share.Models
@using Front.Models.View
@model VMProductIndex
@{
    <div class="row">
        <div id="leftMenu" class="span2">
            @Html.Action("Left", "Include", Model.Category)
        </div>
        <div id="prdMain" class="span10">
            <ul class="breadcrumb">
                <li><a href="/Home">Home</a> <span class="divider">/</span></li>
                <li><a href="/Category/v2">Makeup</a> <span class="divider">/</span></li>
                <li><a href="/Category/v2">Face</a> <span class="divider">/</span></li>
                <li class="active">Fruit Pigmented Cosmetics</li>
            </ul>
            <div class="row">
                <div id="photos" class="span4">
                    <div class="thumbnail"><img src="@Model.Item.Photo"/></div>
                    <div id="otherPhotos">
                        <div class="thumbnail"><img src="/Content/img/prod9.png" onclick="$('#largePrd').attr('src',$(this).attr('src'));"/></div>
                        <div class="thumbnail"><img src="/Content/img/prod8.jpg" onclick="$('#largePrd').attr('src',$(this).attr('src'));"/></div>
                        <div class="thumbnail"><img src="/Content/img/prod7.jpg" onclick="$('#largePrd').attr('src',$(this).attr('src'));"/></div>
                        <div class="thumbnail"><img src="/Content/img/prod6.png" onclick="$('#largePrd').attr('src',$(this).attr('src'));"/></div>
                    </div>
                </div>
                <div id="infos" class="span6">
                    <h4>@Model.Item.Name</h4><div id="share">@Html.Partial("_ShareThis")</div>
                    <p><b>Item #: @Model.Item.No</b><br />@Model.Item.Description</p>
                    <p><b>Net wt.@Model.Item.Imperial.NetCount oz / @Model.Item.Metric.NetCount ml</b></p>
                    <p>
                        Price:<span id="origPrice">$@Model.Item.Price.Basic</span><span id="newPrice">$@Model.Item.Price.WholeSale</span>
                        Rating:<img src="/Content/img/star5.gif" /><span>(@Model.Item.Comments.Count Comments)</span>
                    </p>
                    <p>
                        Qty:<input id="qty" type="text" size="1" value="2"/>
                        <button class="btn btn-mini btn-danger" onclick="alert('Success add to your cart.');return false;">Add to Cart</button> <button class="btn btn-mini btn-success" onclick="alert('Success add to your watching list.');return false;">Add to Favourite</button>
                    </p>
                    <b>You may also like:</b>
                    <div id="alsoLike">
                        @foreach(Item i in Model.Item.AlsoLikes)
                        {
                            <div class="thumbnail"><img src="@i.Photo" onclick="$('#largePrd').attr('src',$(this).attr('src'));"/></div>
                        }
                    </div>
                </div>
            </div>
            <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#info">Product Information</a></li>
                <li><a href="#review">User Review</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="info">
                    <h4>@Model.Item.Name</h4>
                    @Html.Raw(Model.Item.FullDescription)
                </div>
                <div class="tab-pane" id="review">
                    @foreach(Comment c in Model.Item.Comments)
                    {
                        <p><img src="/Content/img/star5.gif" /><b>@c.Title</b><i>@c.CreateAt</i></p>
                        <p>Reviewer: @c.Customer.FirstName @c.Customer.LastName from @c.Customer.State.Name, @c.Customer.Country.Name </p>
                        <p>@c.Content</p>
                        <p>Was this review helpful to you?&nbsp;&nbsp;<a href="#"><img src="/Content/img/btn_reviews_yes.gif" /></a>&nbsp;<a href="#"><img src="/Content/img/btn_reviews_no.gif" /></a></p>
                        <hr />
                    }
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        })
    </script>
}
